<template>
  <div class="form-item col-1">
    <div class="wrapper">
      <a-button type="primary" style="width: 310px" @click="visible = true">
        点击添加
      </a-button>

      <draggable
          tag="div" class="tab-box"
          :list="tab_list"
          v-bind="dragOptions">

        <div class="tab-item" :class="[tab_active == item.id?'active':'']" v-for="item in tab_list" :key="item.id"
             @click="chooseIt(item)">
          <span>{{item.component}}</span><span class="close">
          <a-icon class="icon-close11" type="close-circle" @click.stop="deleteIt(item.id)"/></span>
        </div>

      </draggable>

      <div style="margin-top: 10px" v-if="current_tab.id">
        <div class="title-box">
          <span style="flex: 0 0 100px">选项模块</span><span style="flex: 1;">{{current_tab.component}}</span>
        </div>
        <!--<div class="title-box">-->
          <!--<span style="flex: 0 0 100px;align-self: center">选项名称</span>-->
          <!--<span style="flex: 1;"><a-input placeholder="选项名称" style="width: 200px" v-model.trim="current_tab.name"/></span>-->
        <!--</div>-->
        <div style="margin-top: 15px">
          <!-- 数据配置界面 -->
          <template-config-detail
              :layout="current_tab.layout"
              :configs="current_tab.datas"
              :rootConfig="current_tab.datas"
              type="datas"
              key="datas">
          </template-config-detail>
        </div>
      </div>
    </div>

    <a-modal v-model="visible" title="选择模块" @ok="handleOk">
      <a-radio-group v-model="choose_type">
        <a-radio :style="radioStyle" :value="'1'">
          统计
        </a-radio>
      </a-radio-group>
    </a-modal>
  </div>
</template>

<script>
	import draggable from 'vuedraggable';
	// 配置项编译器
	// import templateConfigDetail from '../template-config-detail.vue';

	export default {
		components: {
			draggable,
			// templateConfigDetail
		},

		props: ['value', 'config', 'rootConfig'],

		data() {
			return {
				current_ids: [], //现在已经添加过的id
				visible: false,
				tab_active: '', //当前选择的选项卡
				// tab_list: [],  //选项卡列表
				choose_type: '',
				current_tab: {},
				radioStyle: {
					display: 'block',
					height: '30px',
					lineHeight: '30px',
				},
				dragOptions: {
					animation: 200, // 动画时间
					group: "description",
					disabled: false,
					ghostClass: "sortable-ghost",
					dragClass: "sortable-drag",
					filter: ".ignore-elements"
				},
			}
		},

		computed: {
			tab_list: {
				get() {
					this.current_ids = [];
					if(this.value.length > 0) {
						this.value.map((item)=>{
							this.current_ids.push(item.id);
							item.remote_data = this.handle_data(item.datas)
							if(item.active) {
								this.current_tab = item;
								this.tab_active = item.id;
							}
						});
					}else {
						this.current_tab = {};
						this.tab_active = '';
					}

					return this.value;
				},
				set(newValue) {
					this.$emit('input', newValue);
				}
			}
		},
    mounted() {},
		methods: {
			/**
			 * 处理数据
			 * @param {String} datas
			 * **/
			handle_data(datas) {
				let handleDatas = {};
				if(datas) {
					Object.keys(datas).map(key => {
						handleDatas[key] = datas[key].value;
					});
        }
				return handleDatas;
			},
			chooseIt(item) {
				for (let i = 0; i < this.tab_list.length; i++) {
					if(this.tab_list[i].id == item.id) {
						this.tab_list[i].active = true;
          }else {
						this.tab_list[i].active = false;
          }
				}
				this.current_tab = item;
				this.tab_active = item.id;
			},
			deleteIt(id) {
				for (let i = 0; i < this.tab_list.length; i++) {
					if (this.tab_list[i].id == id) {
						this.tab_list.splice(i, 1);
					}
					if (this.current_tab.id == id) {
						this.current_tab = {};
						if (this.tab_list.length >= 1) {
							this.tab_list[0].active = true;
							this.current_tab = this.tab_list[0];
							this.tab_active = this.tab_list[0].id;
						}
					}
				}
			},
			handleOk(e) {
				if(!this.choose_type) {
					this.$message.error("请选择模块");
					return;
        }
        if(this.tab_list.filter((item)=>{return item.type_id == this.choose_type}).length > 0) {
	        this.$message.error("不能选择重复模块");
					return;
        }
				let id = this.tab_list.length + 1;
				while (this.current_ids.includes(id)) {
					id += 1;
				}
				this.current_ids.push(id);
				let component = '';
				let datas = {};
				let layout = [];
				let uikey = '';
				switch (this.choose_type) {
					case '1':
						uikey = 'C_statistics';
						component = '统计';
						layout = [
							{
								title: '显示数据',
								groups: [
									'show_list',
                  'all_stores_count',
                  'all_fans_count',
                  'local_stores_count',
                  'local_fans_count',
                  'city_type'
								]
							},
							{
								title: '内边距',
								groups: [
									'padding_top',
									'padding_bottom',
									'padding_left',
									'padding_right',
								]
							},
							{
								title: '样式设置',
								groups: [
                  'preview_color',
                  'font_size',
                  'font_color'
								]
							},
						];
						datas = {
							show_list: {
								title: "显示数据",
								type: "memberCheckbox",
								from: 'member_data',
								options: [
									{label: "全国商家", value: "all_stores_count"},
									{label: "全国粉丝", value: "all_fans_count"},
									{label: "本地商家", value: "local_stores_count"},
									{label: "本地粉丝", value: "local_fans_count"}
								],
								value: [],
								urls: [],
							},
							all_stores_count: {
								title: '全国商家虚拟数量',
								showBy: 'show_list',
								showKey: 'all_stores_count',
								type: 'number',
								value: 0,
								max: 10000000000
							},
							all_fans_count: {
								title: '全国粉丝虚拟数量',
								showBy: 'show_list',
								showKey: 'all_fans_count',
								type: 'number',
								value: 0,
								max: 10000000000
							},
							local_stores_count: {
								title: '本地商家虚拟数量',
								showBy: 'show_list',
								showKey: 'local_stores_count',
								type: 'number',
								value: 0,
								max: 10000000000
							},
							local_fans_count: {
								title: '本地粉丝虚拟数量',
								showBy: 'show_list',
								showKey: 'local_fans_count',
								type: 'number',
								value: 0,
								max: 10000000000
							},
							city_type: {
								title: '本地商家/本地粉丝的区域',
								showBy: 'show_list',
								showKey: ['local_fans_count', 'local_stores_count'],
								type: 'radio',
								value: 'province',
								options: [
									{label: '省', value: 'province'},
									{label: '市', value: 'city'},
									{label: '区/县', value: 'district'},
								]
							},
							padding_top: { title: '上边距', type: 'number', value: 0, col: 4, },
							padding_bottom: { title: '下边距', type: 'number', value: 0, col: 4, },
							padding_left: { title: '左边距', type: 'number', value: 0, col: 4, },
							padding_right: { title: '右边距', type: 'number', value: 0, col: 4, },
							preview_color: {
								title: "背景",
								type: "bg",
								value: {
									isColor: '1',
									color: "#ffffff",
									image: ""
								}
							},
							font_size: {
								title: "字体大小",
								type: "bar",
								value: 14,
								min: 12,
								max: 28,
							},
							font_color: {
								title: '字体颜色',
								type: 'color',
								value: "#333333",
							},
						};
						break;
					default:
						component = '无';
						uikey = 'U_statistics';
						return;
				}
				let item = {id: id, type_id: this.choose_type, uikey: uikey, component: component, datas: datas, layout: layout, name: '', active: true};
				for (let i = 0; i < this.tab_list.length; i++) {
          this.tab_list[i].active = false;
				}
				this.current_tab = item;
				this.tab_active = item.id;
				this.tab_list.push(item);
				this.choose_type = "";

				this.visible = false;
			},
		}
	}
</script>
<style lang="less" scoped>
  .tab-box {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  .tab-item {
    cursor: move;
    border: 1px solid #333333;
    color: #333333;
    padding: 5px 10px;
    margin: 5px;
    .close {
      cursor: pointer;
      padding: 2px 5px;
      margin-left: 5px;
    }
    &.active {
      border: 0;
      background-color: rgba(41, 186, 156, 0.15);
      color: #29ba9c;
    }
  }

  .title-box {
    display: flex;
    margin-bottom: 10px;
  }
</style>
